<template>
  <div class="login">
    <div class="login-main">
      <div class="login-main-left">
        <h2 class="login-main-left-title">vue2后台管理系统</h2>
      </div>
      <div class="login-main-right">
        <h2 class="login-main-right-title">Welcome! 欢迎登陆</h2>
        <h3 class="login-main-right-tip">账号登录</h3>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-main-right-form"
        >
          <el-form-item prop="username" class="login-main-right-form-item">
            <el-input
              v-model="loginForm.username"
              placeholder="Username"
              name="username"
              type="text"
              prefix-icon="el-icon-user-solid"
            />
          </el-form-item>
          <el-form-item prop="password" class="login-main-right-form-item">
            <el-input
              v-model="loginForm.password"
              placeholder="Password"
              name="password"
              show-password
              prefix-icon="el-icon-unlock"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>

          <el-button
            :loading="loading"
            type="primary"
            style="width: 50%; margin-left: 100px;"
            @click.native.prevent="handleLogin"
            >Login</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";

export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("Please enter the correct user name"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("The password can not be less than 6 digits"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "admin",
        password: "111111",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      loading: false,
      redirect: undefined,
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.login{
  background: url("~@/assets/images/login_bg1.jpg") no-repeat;
  height: 100%;
  overflow: hidden;
  &-main{
    height: 50%;
    width: 60%;
    background-color: #beecf3;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
    padding-top: 20px;
    top:30%;
    display: flex;
    &-left{
      flex:1;
      background:url("~@/assets/images/login_bg2.png") no-repeat;
      background-size: 100% 100%;
      &-title{
        text-align: center;
      }
    }
    &-right{
      flex:1;
      &-title,&-tip{
        text-align: center;
      }
      &-form{
        width: 400px;
        margin: 60px auto 0;
        
      }
    }
  }  
}
</style>
